<template>
  <div class="careerOverviewWrapper" v-loading="loading">
    <div class="mainContent">
      <totalSalary :totalSalaryData="totalSalaryData" />
      <detailSalary :detailSalaryData="detailSalaryData" />
    </div>
    <rightsideScroller
      :secondLayerList="secondLayerList"
      :workEnviromentIndex="workEnviromentIndex"
    />
  </div>
</template>

<script>
import { homepageLayerData } from "@/api/position-detail";
import totalSalary from "./totalSalary";
import detailSalary from "./detailSalary";
import rightsideScroller from "../components/rightsideScroller.vue";
export default {
  name: "salaryOverview",
  components: {
    totalSalary,
    detailSalary,
    rightsideScroller,
  },
  props: {
    allLayerList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      totalSalaryData: [],
      detailSalaryData: [],
      secondLayerIds: [],
      secondLayerList: [],
      firstSelectedNav: "",
      secondSelectedNav: "",
      isClickScroll: false,
      editData: {},
      loading: true,
      workEnviromentIndex: "",
    };
  },

  watch: {
    allLayerList: {
      handler(newValue, oldValue) {
        if (newValue.length) {
          newValue.forEach((item) => {
            if (item.layerId == 41) {
              this.topId = item.layerId;
              this.secondLayerIds = item.children.map((_item) => {
                if (_item.layerId == 8) {
                  this.workEnviromentIndex = _index;
                }
                return _item.layerId;
              });
              this.secondLayerList = item.children;
              this.reqHomepageLayerData();
            }
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    reqHomepageLayerData() {
      const params = {
        layerIds: this.secondLayerIds.join("_"),
        id: this.$route.query.id,
        topId: this.topId,
      };
      homepageLayerData(params)
        .then((res) => {
          if (res.code == 200) {
            res.data.forEach((item) => {
              if (item.layerId == 83) {
                this.totalSalaryData = item.children;
              }
              if (item.layerId == 42) {
                this.detailSalaryData = item.children;
                let targetItem = this.detailSalaryData.find(
                  (item) => item.layerId == "178"
                );
                if (targetItem) {
                  this.detailSalaryData.splice(
                    this.detailSalaryData.indexOf(targetItem),
                    1
                  );
                  this.detailSalaryData.unshift(targetItem);
                }
              }
            });
          }
        })
        .catch((err) => {
          //console.log("err", err);
          this.$message.error("服务器开小差啦");
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.careerOverviewWrapper {
  display: flex;
  position: relative;
  box-shadow: inset 4px 4px 11px 2px rgba(118, 170, 244, 0.18);
  border: 1px solid #eaedf7;
  border-radius: 8px;
  padding: 14px;
  flex: 1;
  max-height: calc(100vh - 160px);
  overflow-y: scroll;
  min-width: 1230px;
  .mainContent {
    flex: 1;
  }
}
</style>
